<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.heig{
				width: 200px;
				height: 200px;
				background: skyblue;
				overflow: auto;
				border: 2px solid #000;
				box-sizing: border-box;
				
			}
		</style>
	</head>
	<body>
		<div class="web">
			<!--.test{我是第$个div}*3-->
			<div class="test" name="1">我是第1个div</div>
			<div class="test" name="2">我是第2个div</div>
			<div class="test" name="3">我是第3个div</div>
		</div>
		<input type="text" id="age"/>
		<input type="checkbox" checked="checked"  id="check"/>
		<div class="heig">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			/**
			 * 插入元素
			 * element.insertBefore(newEle,oldEle)
			 * 	newEle:表示需要插入的新元素
			 * 	oldEle:表示新元素要在oldEle这个老元素之前插入
			 * */
			var div = document.createElement("div");
			var web = document.querySelector(".web");
			var test = web.querySelectorAll(".test");
			web.insertBefore(div,test[1]);
			
			/**
			 * removeAttribute()
			 * 移除指定的元素属性，没有返回值
			 * *************************************
			 * removeAttributeNode()
			 * 移除属性节点，返回值为该属性节点
			 * */
			console.log(test[0].removeAttribute("name"));//undefined
			/****************************************/
			var att = document.createAttribute("id");
			att.value = "3";
			test[2].setAttributeNode(att);
			console.log(test[2].removeAttributeNode(att));//id="3"
			
			
			//ele.removeChild(child):移除子元素
			web.removeChild(test[1]);
			
			//ele.remove():移除元素本身
			test[1].remove();
			
			
			//ele.replaceChild(newEle,oldEle):替换元素
			var p = document.createElement("p");
			p.innerText = "我是p标签";
			web.replaceChild(p,test[2]);
			
			//els.lastChild:获取元素最后一个子节点
			console.log(web.lastChild);
			
			//ele.nextSibling:获取到指定元素的下一个兄弟节点
			console.log(test[0].nextSibling);
			
			//ele.parentNode:获取到指定元素的父节点
			console.log(test[0].parentNode);
			
			//ele.focus()：设置元素或文档获取焦点
			var inp = document.querySelector("#age");
			inp.focus();
			
			//getAttribute():获取元素的属性值，这个值只有在html结构上写了，才能获取到（checked="checked"）
			var check = document.querySelector("#check");
			console.log(check.getAttribute("checked"));
			
			
			// scrollWidth,scrollHeight获取元素的宽高，不包括边框
			var heig = document.querySelector(".heig");
			console.log(heig.scrollWidth);
			console.log(heig.scrollHeight);
			
			//scrollLeft,scrollTop获取元素内容滚动的高度
			heig.addEventListener("scroll",function(){
				console.log(heig.scrollLeft);
				console.log(heig.scrollTop);
			})
			
			//heig.style = "width:300px;height:300px;background:pink;"
			heig.style.cssText = "width:300px;height:300px;background:pink;"
			
			
			//添加一个元素到html结构
			//1、document.creatElement()
			//2、innerHTML
			
			var tab = document.createElement("table");
			var tr = document.createElement("tr");
			var td = document.createElement("td");
			document.body.appendChild(tab);
			tab.appendChild(tr);
			tr.appendChild(td);
			var trClone = tr.cloneNode(true);
			tab.appendChild(trClone);
			
			
			//var txt =  "<table border='' cellspacing='' cellpadding=''><tr><th>Header</th><th>Header</th><th>Header</th></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr></table>"
			var txt = ` <table border=''>
						<tr><th>Header</th><th>Header</th></tr>
						<tr><td>Data</td><td>Data</td></tr>
						</table>`
		document.body.innerHTML = txt;
		</script>
	</body>
</html>

